定义： 指定一个元素应沿其容器的左侧或者右侧放置，也允许文本和内联元素环绕它；浮动后脱离网页正常文档流，但也保持部分的流动性（与绝对定位相反），使用float后，元素会变为块级元素。 那么文档流是什么： 文档流：文档中可显示对象在排列时所占用的位置/空间，脱离文档流指的是对象在页面中不占据位置。 float的取值： left：元素浮动在其所在的块容器左侧 right：元素浮动在其所在的块容器右侧 none：元素不浮动 float的原理： 浮动元素使得元素脱离了文档，在页面中不占据位置； 浮动在碰到父元素的边框或者浮动元素的边框就会停止； 浮动不会重叠； 浮动只能左右放置； 浮动后块级元素会在同一行显示，行内元素可以设置宽高； 父元素没有设置宽度和高度时，宽度由内容撑开； float的总结： 当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素 float的应用： 在网页中实现排版布局，比如想在一行内显示对应的标签元素，可以使用浮动属性，浮动可以将元素并排显示。 清除浮动的方式： 当元素设置float后，该元素会脱离文档流并且向左/右浮动，浮动元素会造成父元素高度塌陷；有下面5种方式清除浮动： 1. 设置父盒子的固定高度height(前提是要设置子盒子的高度)，用父盒子来包裹住子盒子；(常用用在盒子固定高度区域，比如固定的导航栏)，缺点：使用不灵活，后期不易维护。 2. 伪元素清除法：给受影响的元素添加clear属性，有三种取值，clear：left/right/both; 3. 利用overflow清除浮动：在父级元素的样式里面添加：overflow：hidden，注意这种情况父元素不能设置高度； 4. 空div法(内墙法)：在最后一个浮动的盒子后，添加一个空的块级元素(通常是div)，同时设置clear：both来清除浮动，同样父元素不能设置高度； 5. 伪对象法：对父标签添加伪类after，添加空的内容，并且使用clear：both； 常见写法：box为父元素（.box::after{ content:" "; display:block; clear: both;}）

定义： position：指定了元素的定位类型，是元素的定位机制，用于指定一个元素在文档中的定位方式，结合top、left、bottom、right属性，决定该元素的最终位置。 position的取值： static/relative/absolute/fixed，其中static和relative会占据文档流空间，会相对它在正常流中的默认位置进行偏移；absolute/fixed则会生成一个块级框，脱离文档流； 对应4种取值： absolute：绝对定位，脱离文档流，相对于除static定位以外的第一个父元素进行定位；可以设置外边距，且不会与其他边距合并； 现象：脱离了标准文档流，不占页面中的位置；层级提高，做网页压盖效果； fixed：绝对定位（固定定位），相对于浏览器窗口进行定位；元素的位置在屏幕滚动时不会发生改变；可以创建固定的有宽高元素的网页效果，比如固定导航栏，回到顶部按钮，小广告等。 relative：相对定位，相对于其正常位置进行定位；元素先放置在没添加定位时的位置，在不改变页面布局的前提下调整元素位置。 **static：**默认值，没有定位，元素出现在正常的流中；此时top,left,right,bottom和z-index无效；

元素使用top, bottom, right, left四个属性进行定位，需要先设定position属性，才能工作。 z-index：仅能在定位元素上有效，该属性设置一个定位元素沿z轴的位置，z轴定义为垂直延伸到显示区的轴，z-index为正数时，表示里用户更近，为负数表示离用户更远。 ** position可以做的练习： （1）下拉列表练习 （2）两张图片错开效果 （3）图片上面定位文字 （4）元素从下面出来效果 （5）照片墙

定义：定义建立布局时生成的显示框的类型，对于HTML文档，使用display不谨慎容易违反其中已定义的显示层次结构。 display的取值：none / block / inline / inline-block / table-cell / Flex none:此元素不会被显示 block：元素显示为块级元素，会换行 inline：默认，显示内联元素，不换行 inline-block：行内块元素，结合block和inline的部分属性 table-cell：会作为一个表格单元格显示（类似&） Flex：弹性盒模型 在页面中，行盒不换行，块盒独占一行，常见的行盒包括容器元素，h1~h6，p元素，span，strong，em，i，img，video，audio 几种隐藏的对比： display:none，隐藏自己，隐藏后 原位置不保留 visibility:hidden，隐藏自己，隐藏后 原位置保留 opacity:0，隐藏自己，隐藏后 原位置保留 overflow:hidden，将溢出部分隐藏 原位置不保留的属性：float; position:absolute; position:fixed; display:none;

4.1 BFC（块级格式化上下文） 定义：是一个独立的渲染区域， 它规定了内部的块级盒子如何布局，同时与这个区域外部不相关。 BFC布局规则： 1.内部的盒子会在垂直方向，一个接一个放置。 2.盒子垂直方向的距离，由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠 3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。 4.BFC的区域不会与float 元素重叠。 5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。 6.计算BFC的高度时，浮动元素也参与计算 会生成BFC的元素 1.根元素 2.float属性不为none的其他 3.position为absolute或fixed时 4.display为inline-block时 5.overflow不为visible的其他 总结 浮动定位和清除浮动只会应用于在同一个BFC的元素，浮动不会影响其他BFC中元素的布局，而清除浮动只能清除同一BFC中在他前面的元素的浮动； 总结：只要让符合子形成BFC的区域，那么它就会清除区域中浮动元素带来的影响。 4.2 盒模型 元素的内容高度、padding、border以及margin 元素的分类：块级元素、行内元素、行内块元素之间的区别 盒模型的margin，垂直方向上会出现外边距合并的问题

~~后面总结了会再继续更新